<template>
  <div class="container-fluid">
    <div class="alert alert-primary alert-dismissible fade show" role="alert" v-if="msg">
      {{ msg }}
      <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close" @click="msg=''"></button>
    </div>
    <div class="row" style=" margin-top:6%">
      <div class="col-2">
      </div>
      <div class="col-8">
        <div class="row">
          <div class="col-8">
            <div class="title">
              <h3>{{ video.title }}</h3>
              <h6>播放量:{{ video.play_num }},评论数{{ video.comment_num }},发布时间:{{ video.up_time }}</h6>
            </div>
            <div class="ratio ratio-16x9">
              <video :src="prefix2+'/v'+video.storage+'.mp4'" controls>
              </video>
            </div>
            <p class="d-flex justify-content-between mt-3">
              <button class="btn btn-info" v-if="!uuid" @click="msg='请登录'">点赞</button>
              <button class="btn btn-info" @click="re.get('user/likeVideo/'+videoId).then(()=>likeVideo=true)" v-if="!likeVideo&&uuid">点赞</button>
              <button class="btn btn-outline-info" @click="re.get('user/unlikeVideo/'+videoId).then(()=>likeVideo=false)" v-if="likeVideo">取消点赞</button>
              <button class="btn btn-warning" v-if="!uuid" @click="msg='请登录'">收藏</button>
              <button class="btn btn-warning" @click="re.get('user/favorite',{videoid:videoId}).then(()=>favoriteVideo=true)" v-if="!favoriteVideo&&uuid">收藏</button>
              <button class="btn btn-outline-warning" @click="re.get('user/deleteF',{videoIds:videoId}).then(()=>favoriteVideo=false)" v-if="favoriteVideo">取消收藏</button>
              <button @click="null" v-if="null">举报</button>
            </p>
            <p>作者留言:{{ video.info }}</p>
            <p>评论</p>

            <div class="row">
              <div class="col-2">
                <img src="../assets/1.jpeg" class="tou">
              </div>
              <div class="col-10">
                <form>
                  <textarea name="" rows="2" cols="45" style="min-height:80px;min-width:80%;max-height:80px;max-width:80%;"></textarea>
                  <input type="submit" value="发表评论">
                </form>
              </div>
              <p style="color: #cbbcbc">————————————————————————————————</p>
            </div>


            <div class="row">
              <div class="col-2">
                <img src="../assets/2.jpeg" class="tou">
              </div>
              <div class="col-10">
                <p>谢谢观看</p>
              </div>
              <p style="color: #cbbcbc">————————————————————————————————</p>
            </div>


            <div aria-label="Page navigation example">
              <ul class="pagination pagination-centered">
                <li class="page-item"><a class="page-link" href="#">上一页</a></li>
                <li class="page-item"><a class="page-link" href="#">1</a></li>
                <li class="page-item"><a class="page-link" href="#">2</a></li>
                <li class="page-item"><a class="page-link" href="#">3</a></li>
                <li class="page-item"><a class="page-link" href="#">下一页</a></li>
              </ul>
            </div>

          </div>
          <div class="col-4">
            <div>
              <div class="row">
<!--                <template @click="seeInfo(upper.uuid)">-->
                  <div class="col-3"><img :src="re.face(upper.face)" class="tou" @click="seeInfo(upper.uuid)"></div>
                  <div class="col-6" @click="seeInfo(upper.uuid)">
                    <h6>up:{{ upper.name }}</h6>
                    <h6>{{ upper.info }}</h6>
                  </div>
<!--                </template>-->
                <a class="btn btn-primary" href="javascript:" @click="msg='请登录'" v-if="!uuid">关注</a>
                <a class="btn btn-primary" href="javascript:" @click="re.get('user/subscribeAUser/'+upper.uuid).then(()=>{subUser=true})" v-if="!subUser&&uuid">关注</a>
                <span @click="re.get('user/cancelSub/'+upper.uuid).then(()=>subUser=false)" v-if="subUser" title="点击取消关注" class="btn btn-outline-secondary">已关注</span>
              </div>
              <div class="row">
                <div class="col-5">相关视频</div>
                <div class="col-5"></div>
              </div>
              <template v-for="(i,x) in other" :key="x">
                <div>
                  <div class="card mb-3" style="max-width: 540px;" @click="playVideo(i.videoid,false)">
                    <div class="row g-0">
                      <div class="col-md-6">
                        <img :src="prefix2+'/p'+i.cover_pic+'.jpg'" class="img-fluid rounded-start" alt="...">
                      </div>
                      <div class="col-md-6">
                        <div class="card-body">
                          <h6 class="card-title"> <div class="line-limit-length">{{ i.title }}</div> </h6>
                          <p class="card-text"><small class="text-muted">作者 {{ i.uuid }} </small></p>
                          <p class="card-text"><small class="text-muted">播放量：{{ i.play_num }} </small></p>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
                <br v-if="x<other.length">
              </template>
              <!--              <div>
                              <div class="card mb-3" style="max-width: 540px;">
                                <div class="row g-0">
                                  <div class="col-md-6">
                                    <img src="../assets/1.jpeg"  class="img-fluid rounded-start" alt="...">
                                  </div>
                                  <div class="col-md-6">
                                    <div class="card-body">
                                      <h6 class="card-title"> 视频标题  </h6>
                                      <p class="card-text"><small class="text-muted">作者 </small></p>
                                      <p class="card-text"><small class="text-muted">播放量： </small></p>
                                    </div>
                                  </div>
                                </div>
                              </div>
                            </div>
                            <br>
                            <div>
                              <div class="card mb-3" style="max-width: 540px;">
                                <div class="row g-0">
                                  <div class="col-md-6">
                                    <img src="../assets/1.jpeg"  class="img-fluid rounded-start" alt="...">
                                  </div>
                                  <div class="col-md-6">
                                    <div class="card-body">
                                      <h6 class="card-title"> 视频标题  </h6>
                                      <p class="card-text"><small class="text-muted">作者 </small></p>
                                      <p class="card-text"><small class="text-muted">播放量： </small></p>
                                    </div>
                                  </div>
                                </div>
                              </div>
                            </div>
                            <br>
                            <div>
                              <div class="card mb-3" style="max-width: 540px;">
                                <div class="row g-0">
                                  <div class="col-md-6">
                                    <img src="../assets/1.jpeg"  class="img-fluid rounded-start" alt="...">
                                  </div>
                                  <div class="col-md-6">
                                    <div class="card-body">
                                      <h6 class="card-title"> 视频标题  </h6>
                                      <p class="card-text"><small class="text-muted">作者 </small></p>
                                      <p class="card-text"><small class="text-muted">播放量： </small></p>
                                    </div>
                                  </div>
                                </div>
                              </div>
                            </div>
                            <br>
                            <div>
                              <div class="card mb-3" style="max-width: 540px;">
                                <div class="row g-0">
                                  <div class="col-md-6">
                                    <img src="../assets/1.jpeg"  class="img-fluid rounded-start" alt="...">
                                  </div>
                                  <div class="col-md-6">
                                    <div class="card-body">
                                      <h6 class="card-title"> 视频标题  </h6>
                                      <p class="card-text"><small class="text-muted">作者 </small></p>
                                      <p class="card-text"><small class="text-muted">播放量： </small></p>
                                    </div>
                                  </div>
                                </div>
                              </div>
                            </div>
                            <br>
                            <div>
                              <div class="card mb-3" style="max-width: 540px;">
                                <div class="row g-0">
                                  <div class="col-md-6">
                                    <img src="../assets/1.jpeg"  class="img-fluid rounded-start" alt="...">
                                  </div>
                                  <div class="col-md-6">
                                    <div class="card-body">
                                      <h6 class="card-title"> 视频标题  </h6>
                                      <p class="card-text"><small class="text-muted">作者 </small></p>
                                      <p class="card-text"><small class="text-muted">播放量： </small></p>
                                    </div>
                                  </div>
                                </div>
                              </div>
                            </div>-->
            </div>
          </div>


          <div class="col-2">
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script lang="ts">
import {defineComponent, inject, Ref, ref, watch} from 'vue'
import re from '@/hooks/request'
import {VideoData, UserInfo, VideoState, User} from "@/types/AllData";

export default defineComponent({
  name: "VideoPlay",
  inject: ['prefix2', 'playVideo','uuid','seeInfo'],
  data() {
    return {
      video: VideoState,
      upper: User,
      other: [VideoState]
    }
  },
  setup() {
    const aComponent = inject('aComponent')
    const changeComponent = inject('changeComponent')
    const videoId = inject<Ref<number>>('videoId')
    const likeVideo = ref(false)
    const favoriteVideo = ref(false)
    const subUser = ref(false)
    const uuid=inject('uuid')
    const msg=ref('')
    const getLike = async () => {
      likeVideo.value = await re.get('user/ifLike/' +videoId?.value)
      favoriteVideo.value = await re.get('user/ifFavorite/' + videoId?.value)
      subUser.value = await re.get('user/ifSub/' + videoId?.value)
    }
    getLike()
    watch(videoId||ref(0),async (n,o)=>{
      likeVideo.value = await re.get('user/ifLike/' +videoId?.value)
      favoriteVideo.value = await re.get('user/ifFavorite/' + videoId?.value)
      subUser.value = await re.get('user/ifSub/' + videoId?.value)
      re.get('/user/saveOrUpdateHistory', {videoid: n}).then(re => {
        console.log('success add history', re)
      })
    })
    // watch(likeVideo, async (n, o) => {
    //   if (n)
    //     await re.get('user/likeVideo/' + videoId?.value)
    //   else
    //     await re.get('user/unlikeVideo/' + videoId?.value)
    // })
    // watch(favoriteVideo, async (n, o) => {
    //   if (n)
    //     await re.get('user/favorite', {videoid: videoId?.value})
    //   else
    //     await re.get('user/deleteF/' , {videoIds: videoId?.value})
    // })
    return {
      aComponent,
      changeComponent,
      videoId,
      likeVideo,
      favoriteVideo,
      subUser,
      re,
      uuid,
      msg
    }
  },
  watch: {
    videoId() {
      this.getVideo()
    },
    // subUser(n, o) {
    //   if (n)
    //     re.get('user/subscribeAUser/' + this.video.uuid)
    //   else
    //     re.get('user/cancelSub/' + this.video.uuid)
    // }
  },
  methods: {
    getVideo() {
      re.get('video/play/' + this.videoId)
          .then(res => {
            this.video = res
          }).then(() => {
        this.getUpper()
        this.getOther()
      })
    },
    getUpper() {
      re.get('user/info/' + this.video.uuid).then(
          res => {
            this.upper = res
          }
      )
    },
    getOther() {
      const query = {
        pageIndex: 1,
        pageCapacity: 10,
        tagID: this.video.tagList[0].tag_id,
        ordered: 1
      }
      re.get('video/search', query).then(re => {
        let vl: VideoData[] = re
        vl.forEach((v, i) => {
          if (v.videoid == this.video.videoid) {
            vl.splice(i, 1)
          }
        })
        this.other = vl
      })
    },
  },
  created() {
    this.getVideo()
    re.get('/user/saveOrUpdateHistory', {videoid: this.videoId}).then(re => {
      console.log('success add history', re)
    })
  }
})
</script>

<style scoped>
.title {
 /*background-color: turquoise;*/
}

.video {
  height: 50%;
  weight: 50%;
  background-color: #100f0f;
}

.tou {
  width:50px;
  height: 50px;
  border-radius: 50%;
}
.line-limit-length{
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 150px;
}
</style>